<template>
  <div>
    <el-select v-model="selectTable" style="width: 100%" clearable filterable placeholder="选择表" @change="tableChange">
      <el-option v-for="table in tables" :key="table.Name" :label="table.Name" :value="table.Name" />
    </el-select>
    <el-table
      :data="columns"
      border
      fit
      highlight-current-row
      max-height="800px"
      style="width: 100%; margin-top: 20px"
      @row-dblclick="columnSelect"
    >
      <el-table-column label="字段" prop="Name" />
      <el-table-column label="备注" prop="Remark" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableInfo',
  props: {
    tables: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: null
    }

  },
  data() {
    return {
      selectTable: null
    }
  },
  computed: {
    columns() {
      if (this.selectTable) {
        return this.findColumns(this.selectTable)
      }
      return []
    }
  },
  methods: {
    columnSelect(row, column, e) {
      this.$emit('column-select', row.Name)
    },
    tableChange() {
      this.$emit('table-change', this.index, this.selectTable)
    },
    findColumns(t) {
      for (const table of this.tables) {
        if (table.Name === t) {
          return table.Columns
        }
      }
      return []
    }
  }
}
</script>

<style scoped>

</style>
